/* eslint-disable vue/require-prop-types */
<template>
  <div>
    <p v-for="item in optionsVar" :key="item.codcode" class="item" @click="changeAction(item.codcode)">
      <el-date-picker
        v-if="type.includes(item.codcode)"
        v-model="value1"
        ref="elDatePicker"
        :type="item.codcode"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        placeholder="选择日期"
        :format="date.format"
        :value-format="date.valueformat"
        @change="changeDate"
      ></el-date-picker>
      <span :class="item.codcode === isactive ? 'isActive' : 'noActive'" v-else>{{ item.codname }}</span>
    </p>
  </div>
</template>
<script>
import select from '@/mixins/select'
export default {
  mixins: [select],
  // eslint-disable-next-line vue/require-prop-types
  props: ['options', 'name', 'label', 'value', 'disabled', 'optionsurl', 'date'],
  data() {
    return {
      isactive: '',
      value1: null,
      optionsVar: [],
      // date: 单选 日期   year: 单选 年份  month: 单选 月  daterange: 开始-结束 日期   monthrange: 开始-结束 月份
      type: ['date', 'year', 'month', 'daterange', 'monthrange'] // 根据 codcode 的类型判断 返回什么类型的 日历
    }
  },
  watch: {
    value(val) {
      this.isactive = this.value
      if (!val) {
        this.value1 = this.value
      }
    }
  },
  created() {
    this.isactive = this.value
    if (this.options) {
      this.optionsVar = this.options
    } else {
      this.queryAction()
    }
  },
  methods: {
    changeDate() {
      if (this.date.BeginDate) {
        this.$emit('input', this.date.BeginDate, this.value1 ? this.value1[0] : null)
      }
      if (this.date.EndDate) {
        this.$emit('input', this.date.EndDate, this.value1 ? this.value1[1] : null)
      }
      this.$emit('change', this.name, this.value1)
    },
    changeAction(value) {
      if (!this.type.includes(value)) {
        this.isactive = value
        this.value1 = null
        this.$emit('change', this.name, value)
      }
    },
    queryAction() {
      this.api[this.optionsurl]({}).then(res => {
        this.optionsVar = res
        // 如果是从后台去参数  判断是否需要  【全部】的选项
        if (this.date.isShowAll) {
          this.optionsVar.splice(0, 0, this.date.isShowAll)
        }
        // 如果是从后台去参数  判断是否需要  【其他】的选项
        if (this.date.isShowOther) {
          this.optionsVar.splice(this.optionsVar.length, 0, this.date.isShowOther)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.item {
  display: inline-block;
  margin: 0.05rem;
  cursor: pointer;
  box-sizing: border-box;
  color: #6b6b6b;
  border-radius: 4px;
}
.noActive {
  padding: 0 0.2rem;
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #dadada;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
}
.isActive {
  padding: 0 0.2rem;
  display: inline-block;
  background: #000965;
  border-radius: 4px;
  color: #fff;
}
</style>
